<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="left">
				<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
			</view>
			<view class="title">首页</view>
			<view class="right">
				<u-icon name="chat" size="40" color="#333" @click="goToChat"></u-icon>
			</view>
		</view>
		
		<!-- 健康状态卡片 -->
		<view class="health-card">
			<view class="header">
				<text class="title">健康状态</text>
				<text class="date">{{currentDate}}</text>
			</view>
			
			<view class="status-list">
				<view class="status-item" v-for="(item, index) in healthStatus" :key="index">
					<view class="icon" :class="item.status">
						<u-icon :name="item.icon" size="40" :color="item.color"></u-icon>
					</view>
					<view class="info">
						<text class="label">{{item.label}}</text>
						<text class="value">{{item.value}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 功能入口 -->
		<view class="function-grid">
			<view class="grid-item" v-for="(item, index) in functions" :key="index" @click="handleFunction(item)">
				<view class="icon-box" :style="{backgroundColor: item.bgColor}">
					<u-icon :name="item.icon" size="48" color="#fff"></u-icon>
				</view>
				<text class="name">{{item.name}}</text>
			</view>
		</view>
		
		<!-- 健康资讯 -->
		<view class="news-section">
			<view class="section-header">
				<text class="title">健康资讯</text>
				<text class="more" @click="goToNews">更多</text>
			</view>
			
			<view class="news-list">
				<view class="news-item" v-for="(item, index) in newsList" :key="index" @click="goToNewsDetail(item)">
					<image class="cover" :src="item.cover" mode="aspectFill"></image>
					<view class="content">
						<text class="title">{{item.title}}</text>
						<view class="meta">
							<text class="time">{{item.time}}</text>
							<text class="views">{{item.views}}阅读</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatar: '/static/default-avatar.png'
				},
				currentDate: '',
				healthStatus: [
					{
						icon: 'heart',
						label: '心率',
						value: '72次/分',
						status: 'normal',
						color: '#52c41a'
					},
					{
						icon: 'blood',
						label: '血压',
						value: '120/80mmHg',
						status: 'normal',
						color: '#52c41a'
					},
					{
						icon: 'sugar',
						label: '血糖',
						value: '5.6mmol/L',
						status: 'normal',
						color: '#52c41a'
					}
				],
				functions: [
					{
						name: '健康评估',
						icon: 'assessment',
						bgColor: '#1890FF',
						path: '/pages/assessment/index'
					},
					{
						name: '健康指标',
						icon: 'metrics',
						bgColor: '#52c41a',
						path: '/pages/my/metrics'
					},
					{
						name: '健康画像',
						icon: 'profile',
						bgColor: '#faad14',
						path: '/pages/my/health'
					},
					{
						name: '健康指导',
						icon: 'guide',
						bgColor: '#722ed1',
						path: '/pages/health/course'
					}
				],
				newsList: [
					{
						id: 1,
						title: '如何预防脑卒中？这些生活习惯很重要',
						cover: '/static/news/1.jpg',
						time: '2024-03-15',
						views: 1234
					},
					{
						id: 2,
						title: '脑卒中康复训练指南，帮助患者恢复健康',
						cover: '/static/news/2.jpg',
						time: '2024-03-14',
						views: 987
					}
				]
			}
		},
		onLoad() {
			// 获取用户信息
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo) {
				this.userInfo = JSON.parse(userInfo)
			}
			
			// 设置当前日期
			const date = new Date()
			this.currentDate = `${date.getMonth() + 1}月${date.getDate()}日`
		},
		methods: {
			goToChat() {
				uni.navigateTo({
					url: '/pages/chat/index'
				})
			},
			handleFunction(item) {
				uni.navigateTo({
					url: item.path
				})
			},
			goToNews() {
				uni.navigateTo({
					url: '/pages/news/index'
				})
			},
			goToNewsDetail(item) {
				uni.navigateTo({
					url: `/pages/news/detail?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #F7F7FA;
		padding-bottom: 40rpx;
		
		.nav-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: #fff;
			
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.health-card {
			margin: 20rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			
			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.date {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.status-list {
				display: flex;
				justify-content: space-between;
				
				.status-item {
					display: flex;
					align-items: center;
					
					.icon {
						width: 80rpx;
						height: 80rpx;
						border-radius: 40rpx;
						background-color: #F7F7FA;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;
						
						&.normal {
							background-color: #f6ffed;
						}
						
						&.warning {
							background-color: #fff7e6;
						}
						
						&.danger {
							background-color: #fff1f0;
						}
					}
					
					.info {
						display: flex;
						flex-direction: column;
						
						.label {
							font-size: 24rpx;
							color: #666;
							margin-bottom: 8rpx;
						}
						
						.value {
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
						}
					}
				}
			}
		}
		
		.function-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 30rpx;
			margin: 20rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			
			.grid-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.icon-box {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 16rpx;
				}
				
				.name {
					font-size: 24rpx;
					color: #333;
				}
			}
		}
		
		.news-section {
			margin: 20rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			
			.section-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.more {
					font-size: 24rpx;
					color: #1890FF;
				}
			}
			
			.news-list {
				.news-item {
					display: flex;
					margin-bottom: 30rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.cover {
						width: 200rpx;
						height: 140rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}
					
					.content {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						
						.title {
							font-size: 28rpx;
							color: #333;
							line-height: 1.4;
						}
						
						.meta {
							display: flex;
							justify-content: space-between;
							
							text {
								font-size: 24rpx;
								color: #999;
							}
						}
					}
				}
			}
		}
	}
</style> 